<template>
  <div class="relevance">
    <div class="headline">关联权限</div>

    <div class="module">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name" class="form-item">
          <el-input v-model="ruleForm.name" clearable></el-input>
        </el-form-item>

        <el-form-item label="角色描述" class="form-describe">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入角色描述"
            v-model="ruleForm.describe"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item class="table">
          <el-tree
            ref="tree"
            :data="relecanceRoute"
            :props="defaultProps"
            node-key="name"
            show-checkbox
          >
            <span class="custom-tree-node" slot-scope="{ node }">
              <span>{{ node.label }}</span>
            </span></el-tree
          >
        </el-form-item>

        <el-form-item>
          <div class="form-button">
            <div class="list" @click="cancelHit('ruleForm')">取消</div>
            <div class="list" @click="saveHit('ruleForm')">保存</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import { systemRoleListId, systemRoleListAdd } from "@/api/system";

import {
  removeTypeOneFromChildren,
  extractTypeOneFromChildren,
} from "@/utils/many";

export default {
  data() {
    return {
      id: "",
      ruleForm: {
        name: "",
        describe: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 1, message: "最低输入一个字", trigger: "blur" },
        ],
      },
      //---------------
      relecanceRoute: [],
      //-------勾选
      defaultProps: {
        children: "children",
        label: "title",
      },
      checkList: [],
      //-----------
      pathList: [],
    };
  },
  created() {
    this.relevanceMet();

    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.systemRoleListIdMet();
    }

    // this.measurementMet();
  },
  mounted() {},
  methods: {
    //--------------
    relevanceMet() {
      this.relecanceRoute = removeTypeOneFromChildren(
        this.$store.state.premissions.sidebarMenu
      );

      // this.relecanceRoute =  this.$store.state.premissions.sidebarMenu
    },

    //-------------------------
    systemRoleListIdMet() {
      let params = this.id;

      systemRoleListId(params).then((res) => {
        if (res.errorCode == null) {
          this.ruleForm.name = res.resultData.managerRoleName;
          this.ruleForm.describe = res.resultData.managerRoleDesc;

          let pathList = res.resultData.managerRoleResource.split(";");
          this.pathList = pathList;
          this.$refs.tree.setCheckedKeys(pathList);
        }
      });
    },
    //-------------------
    saveHit(formName) {
      const extracted = extractTypeOneFromChildren(
        this.$store.state.premissions.sidebarMenu
      );
      const namesList = extracted.map((item) => item.name);
      const namesArray =  this.$refs.tree.getCheckedKeys()
      const managerRoleResource = namesArray.concat(namesList)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            managerRoleId: this.id,
            managerRoleName: this.ruleForm.name,
            managerRoleDesc: this.ruleForm.describe,
            managerRoleResource: managerRoleResource.join(";"),
          };

          systemRoleListAdd(params).then((res) => {
            if (res.errorCode == null) {
              this.$message.success("新增角色成功！");
              this.$refs[formName].resetFields();

              this.$router.push({
                path: "/system/role",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //---------
    //-----------------
    cancelHit(formName) {
      this.$refs[formName].resetFields();
      this.$router.push({
        path: "/system/role",
      });
    },
    //-------------------------------------

    flattenArray(arr) {
      let result = [];
      arr.forEach((item) => {
        if (Array.isArray(item.children)) {
          result = result.concat(this.flattenArray(item.children));
        } else {
          result.push(item);
        }
      });
      return result;
    },
    uniqueArrayOfObjects(array) {
      // 将对象转换为字符串，并使用Set去重
      const unique = Array.from(
        new Set(array.map((item) => JSON.stringify(item)))
      ).map((item) => JSON.parse(item));
      return unique;
    },
  },
};
</script>

<style lang="less" scoped>
.relevance {
  .headline {
    border-left: 3px solid #2a82e4;
    font-size: 16px;
    font-weight: 600;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .module {
    margin-top: 20px;

    .demo-ruleForm {
      padding-left: 20px;
      box-sizing: border-box;
      /deep/ .el-form-item__label {
        width: 80px;
      }

      .form-item {
        width: 500px;
        display: flex;

        /deep/ .el-form-item__content {
          width: 80%;
        }
      }
      .form-describe {
        display: flex;
        width: 500px;

        /deep/ .el-form-item__label {
          width: 80px;
          line-height: normal;
        }

        /deep/ .el-form-item__content {
          width: 80%;
        }

        /deep/ .el-textarea__inner {
          resize: none;
        }
      }

      .form-control {
        width: 70%;

        /deep/ .el-tree-node__label {
          font-size: 16px;
        }

        /deep/ .el-tree-node__content {
          height: 40px;
        }

        /deep/ .el-tree-node.is-expanded > .el-tree-node__children {
          display: flex;
        }

        /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
          display: none;
        }

        /deep/ .el-tree-node__content:hover,
        .el-upload-list__item:hover {
          background-color: #fff !important;
        }

        /deep/ .el-tree-node > .el-tree-node__children {
          background-color: #fff !important;
        }

        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #fff !important;
        }
      }

      .form-button {
        display: flex;
        align-items: center;

        /deep/ .el-form-item__content {
          line-height: 0;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 20px;
          border-radius: 5px;
          width: 80px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }
      }

      .table {
        /deep/ .el-tree-node__content {
          height: 48px;
          border: 1px solid #ccc;
        }

        .custom-tree-node {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>